/* Copyright (c) 2025-2030 ShawnLi*/

import * as React from 'react';
import { observer } from 'mobx-react-lite';

import {
  Remove,
  Title,
  Time,
  Site,
  State,
  TitleContainer,
  OperationContainer,
  Thumbnail,
} from './style';
import { IDownloadItem } from '~/interfaces';
import { ListItem } from '~/renderer/components/ListItem';
import { formatTime } from '~/utils/times';
import store from '../../store';
import { Preloader } from '~/renderer/components/Preloader';
import {
  ICON_DOWN_OPEN,
  ICON_DOWN_FOLDER,
  ICON_DOWN_CANCEL,
  ICON_DOWN_RELOAD,
  ICON_DOWN,
  ICON_UP,

} from '~/renderer/constants/icons';
import { ToolbarButton } from '../ToolbarButton';
import { NavigationDrawer } from '~/renderer/components/NavigationDrawer';

const onClick =
  (item: IDownloadItem) => (e: React.MouseEvent<HTMLDivElement>) => {
    const index = store.selectedItems.indexOf(item._id);
    if (e.ctrlKey) {
      if (index === -1) {
        store.selectedItems.push(item._id);
      } else {
        store.selectedItems.splice(index, 1);
      }
    } else if (e.shiftKey) {
      const lastIndex = store.lastClickedItemIndex;
      const currIndex = store.getItemIndex(item._id);
      const [start, end] =
        currIndex < lastIndex ? [currIndex, lastIndex] : [lastIndex, currIndex];
      if (index === -1) {
        if (lastIndex === -1) {
          store.selectedItems.push(item._id);
        } else {
          let set = new Set(
            store.items.slice(start, end + 1).map((i) => i._id),
          );
          store.selectedItems = [...new Set([...store.selectedItems, ...set])];
        }
        store.selectedItems.push(item._id);
      } else {
        if (lastIndex === currIndex) {
          store.selectedItems = store.selectedItems.filter(
            (id) => id !== item._id,
          );
        } else {
          const set = new Set(
            store.items.slice(start, end + 1).map((i) => i._id),
          );
          store.selectedItems = store.selectedItems.filter(
            (id) => !set.has(id),
          );
        }
      }
    } else {
      if (index === -1) {
        store.selectedItems = [item._id];
      } else {
        store.selectedItems = [];
      }
    }
    store.lastClickedItemId = item._id;
  };

const onTitleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
  e.stopPropagation();
};

export default observer(({ data }: { data: IDownloadItem }) => {
  const selected = store.selectedItems.includes(data._id);
  const opBtnSize = 18;
  return (
    <>
      <ListItem
        key={data._id}
        onClick={onClick(data)}
        // onMouseOver={() => {
        //   store.focusIds.set(data._id, true);
        // }}
        // onMouseLeave={() => {
        //   store.focusIds.delete(data._id);
        // }}
        selected={selected}
        style={{
          // height: '120px',
          // gap: '4px',
          margin: '1px',
          padding: '8px',
          border: '1px solid #ccc',
          borderRadius: '4px',
        }}
      >
        <TitleContainer>
          <Title onClick={onTitleClick} href={data.url} target="_blank">
            {data.title}
          </Title>
        </TitleContainer>
        <Site>{data.url.split('/')[2]}</Site>
        <Time>{formatTime(new Date(data.date))}</Time>
        {/* <Preloader
        thickness={6}
        size={16}
        indeterminate
        style={{ minWidth: 16, marginRight: '8px' }}
      /> */}
        <OperationContainer>
        <State color={'red'}>Clear search history 12345</State>
          <ToolbarButton
            icon={ICON_DOWN_OPEN}
            style={{ cursor: 'pointer' }}
            size={opBtnSize}
            onClick={() => {}}
          />
          {/* <ToolbarButton
          icon={ICON_DOWN_FOLDER}
          style={{ cursor: 'pointer' }}
          size={opBtnSize}
          onClick={(e) => {
            e.stopPropagation();
          }}
        />
        <ToolbarButton
          icon={ICON_DOWN_CANCEL}
          style={{ cursor: 'pointer' }}
          size={opBtnSize}
          onClick={(e) => {
            e.stopPropagation();
          }}
        />
        <ToolbarButton
          icon={ICON_DOWN_RELOAD}
          style={{ cursor: 'pointer' }}
          size={opBtnSize}
          onClick={(e) => {
            e.stopPropagation();
          }}
        /> */}
          <ToolbarButton
            title="Cancel"
            icon={ICON_DOWN_CANCEL}
            style={{ cursor: 'pointer' }}
            size={28}
            preloader={true}
            value={0.5}
            badgeText={'50%'}
            badge={true}
            badgeTop={25}
            badgeRight={-2}
            badgeBackground={'red'}
            badgeTextColor={'white'}
            onClick={(e) => {
              e.stopPropagation();
            }}
          />
          {/* <NavigationDrawer.Item
          icon={ICON_DOWN_RELOAD}
          onClick={(e) => {
            e.stopPropagation();
          }}
        >
          Clear search history
        </NavigationDrawer.Item> */}
        
        <ToolbarButton
          icon={store.focusIds.has(data._id) ? ICON_UP : ICON_DOWN}
          style={{ cursor: 'pointer' }}
          size={opBtnSize}
          onClick={(e) => {
            e.stopPropagation();
            store.focusIds.has(data._id) ? store.focusIds.delete(data._id) : store.focusIds.set(data._id, true);
          }}
        />  
        </OperationContainer>
      </ListItem>
      {store.focusIds.has(data._id) && <Thumbnail src={data.thumbnail} alt="thumbnail" />}
    </>
  );
});
